<script setup>
import '@/assets/css/car_content.css';
import { ref, onMounted } from 'vue';
import axios from 'axios';
const brands = ref([]);
const cars = ref([]);
const categories = ref([]);
const currentPage = ref(1);  // 当前页码
const pageSize = ref(10);    // 每页条数
const total = ref(0);        // 数据总数
const getcar_list = (async () => {
    try {
        const response = await axios.post('http://127.0.0.1:8000/car/api/carslist/', {
            page: currentPage.value,  // 发送当前页码给后端
            page_size: pageSize.value  // 发送每页条数给后端
        });
        brands.value = response.data.manufacturers;
        total.value = response.data.total;  // 设置数据总数

    } catch (error) {
        console.error('Error fetching data', error);
    }
})
onMounted(async () => {
    await getcar_list();  // 页面加载时立即获取第一页的数据
});
// 定义toggleSelection函数
function toggleSelection(key, value) {
    // 构建要传递给后端的数据对象
    const data = {
        [key]: value
    };
    // 调用sendDataToBackend函数发送数据到后端
    sendDataToBackend(data);
}


function toggleSelection2(key, value) {
    // 构建要传递给后端的数据对象
    const data = {
        [key]: value
    };
    // 调用sendDataToBackend函数发送数据到后端
    sendDataToBackend2(data);
}
// 定义sendDataToBackend2函数
function sendDataToBackend2(data) {
    // 使用axios或其他方式将数据发送到后端
    axios.post('http://127.0.0.1:8000/car/api/c_series_name/', data,
        {
            page: currentPage.value,  // 发送当前页码给后端
            page_size: pageSize.value  // 发送每页条数给后端
        }
    )
        .then(response => {
            // 处理后端返回的数据
            console.log('成功发送数据到后端', response.data);
            cars.value = response.data.cars;
            total.value = response.data.cars.total;  // 设置数据总数
        })
        .catch(error => {
            // 处理错误
            console.error('发送数据到后端失败', error);
        });
}

// 定义sendDataToBackend函数
function sendDataToBackend(data) {
    // 使用axios或其他方式将数据发送到后端
    axios.post('http://127.0.0.1:8000/car/api/carlist_b_name/', data,
        {
            page: currentPage.value,  // 发送当前页码给后端
            page_size: pageSize.value  // 发送每页条数给后端
        }
    )
        .then(response => {
            // 处理后端返回的数据
            console.log('成功发送数据到后端', response.data);
            cars.value = response.data.cars;
            total.value = response.data.cars.total;  // 设置数据总数
            categories.value = response.data.categories;
        })
        .catch(error => {
            // 处理错误
            console.error('发送数据到后端失败', error);
        });
}

</script>

<template>
    <div class="car_content">
        <div class="car_content_left">
            <el-scrollbar height="1200px">
                <p v-for="item in brands" :key="item" class="scrollbar-demo-item" @click="toggleSelection('manufacturers', item)">{{ item }}</p>
            </el-scrollbar>
        </div>
        <div class="car_content_right">
            <div class="topmost">
                <div class="price">
                    <div style="font-size: 20px;">价格：</div>
                    <div class="flex gap-2">
                        <el-tag type="primary" @click="toggleSelection('price', '5万以下')">5万以下</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '5-8万')">5-8万</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '8-10万')">8-10万</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '10-15万')">10-15万</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '15-20万')">15-20万</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '20-25万')">20-25万</el-tag>
                        <el-tag type="primary" @click="toggleSelection('price', '25万以上')">25万以上</el-tag>
                    </div>
                </div>
                <!-- <div class="country">
                    <div style="font-size: 20px;">国别：</div>
                    <div class="flex gap-2">
                        <el-tag type="primary" @click="toggleSelection('country', '中国')">中国</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '德国')">德国</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '法国')">法国</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '英国')">英国</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '日本')">日本</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '韩国')">韩国</el-tag>
                        <el-tag type="primary" @click="toggleSelection('country', '美国')">美国</el-tag>
                    </div>
                </div> -->

            </div>
            <br>
                <hr>
            <div class="carname">
                <div class="flex gap-2">
                    <el-tag type="primary" v-for="(car, index) in categories" :key="index" @click="toggleSelection2('carname', car)">
                        {{ car }}
                    </el-tag>
                </div>
            </div>

            <div class="below">
                <el-card v-for="(car, index) in cars" :key="index" class="car-card">
                    <router-link :to="'/details/' + car.id">
                        <div class="el-card__header">
                            <p>{{ car.manufacturers }}-- <span>{{ car.carname }}</span></p>
                        </div>
                        <div class="car-info">
                            <p>{{ car.msg }}</p>
                            <!-- <p>品牌分支：{{ car.c_fct }}</p>
                            <p>车型：{{ car.c_spec_name }}</p>
                            <p>级别：{{ car.c_level }}</p> -->
                        </div>
                    </router-link>

                </el-card>
            </div>
        </div>

        <div class="Topstory-content">
            <el-pagination :page-size="10" :pager-count="10" @current-change="handleCurrentChange"
                layout="prev, pager,next" :total="total" />
        </div>


    </div>


</template>

<style scoped>
.car-card {
    margin-top: 20px;
}

.car-info {
    padding: 20px;
}

.el-tag {
    margin: 5px;
}
</style>
